.bg-image(@url) {
    background-image: url("@{url}@2x.png");
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    	background-image: url("@{url}@3x.png");
    }
}

.star {
    font-size: 0;
    .star-item {
        display: inline-block;
        background-repeat: no-repeat;
    }
    &.star-24 {
        .star-item {
            width: 10px;
            height: 10px;
            margin-right: 3px;
            background-size: 10px 10px;
            &:last-child {
                margin-right: 0;
            }
            &.on {.bg-image('star24_on');}
            &.half {.bg-image('star24_half');}
            &.off {.bg-image('star24_off');}
        }
    }
    &.star-36 {
        .star-item {
            width: 15px;
            height: 15px;
            margin-right: 6px;
            background-size: 15px 15px;
            &:last-child {
                margin-right: 0;
            }
            &.on {.bg-image('star36_on');}
            &.half {.bg-image('star36_half');}
            &.off {.bg-image('star36_off');}
        }
    }
    &.star-48 {
        .star-item {
            width: 20px;
            height: 20px;
            margin-right: 22px;
            background-size: 20px 20px;
            &:last-child {
                margin-right: 0;
            }
            &.on {.bg-image('star48_on');}
            &.half {.bg-image('star48_half');}
            &.off {.bg-image('star48_off');}
        }
    }
}